<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Bootstrap-demo1</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta charset="utf-8">
		<link href="css/bootstrap.min.css" rel="stylesheet" type="css/text">
		<script src="js/bootstrap.min.js"></script>
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<style>
			div[class^=col-]{
				background:#efefef;
			}
		</style>
	</head>
	
	<div class="container">
		<div class="row">
			<!--<div class="col-xs-12 col-md-8">.col-xs-12</div>
			<div class="col-xs-6 col-md-4">.col-xs-6</div>-->
			<div class="col-md-9 col-md-3">.col-md-9 col-md-push-3</div>
			<div class="col-md-3 col-md-9">.col-md-3 col-md-push-9</div>
			<h1>Bootstrap-heading<small>smallhead</small></h1>
			<h1 class="small">Bootstrap-heading<small>smallhead</small></h1>
			<p>P-small</p>
			<p class="small">P-small</p>
			<p class="lead">lead</p>
			<h4>For <del>highlighting</del> a run of <s>text</s> due to <mark><u>its</u> relevance</mark> in <ins>another</ins> context, use the </h4>
			<strong>strong</strong><em>em</em><b>B</b><i>I</i>
			<p class="text-left">text-left</p>
			<p class="text-right">text-right</p>
			<p class="text-justify">text-justify</p>
			<p class="text-center">text-center</p>
			<p class="text-nowrap">text-nowrap</p>
			
			<p class="text-lowercase">lowercase</p>
			<p class="text-uppercase">uppercase</p>
			<p class="text-capitalize">capitalize a girl<abbr title="attribute">缩略语</abbr></p>
			<abbr title="HyperText" class="initialism">initialism</abbr>
			<address><abbr title="attribute">地址：</abbr>china Henan zhengzhou</address>
			<blockquote><p>blockquote</p></blockquote>
			<blockquote>
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>
			
			<blockquote class="blockquote-reverse">
			  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
			  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
			</blockquote>
			<ul>
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
			</ul>
			
			<ul class="list-unstyled">
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
			</ul>
			
			<ol>
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
			</ol>
			
			<ul class="list-inline">
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
				<li>abc</li>
			</ul>
			
			<dl>
				<dt>title</dt>
				<dd>content</dd>
				<dd>contentcon</dd>
				<dt>title</dt>
				<dd>content</dd>
				<dd>contentcon</dd>
			</dl>
			
			<dl class="dl-horizontal">
				<dt>title</dt>
				<dd>content</dd>
				<dd>contentcon</dd>
				<dt>title</dt>
				<dd>content</dd>
				<dd>contentcon</dd>
			</dl>
			
			For example, <code>&lt;section&gt;</code> should be wra<code>ppe</code>d as <kbd>inline</kbd>.
			
			 press k<kbd>ctrl</kbd> + <kbd>,</kbd>
			 
			<pre class="pre-scrollable">&lt;p&gt;Sample text here……&lt;p&gt;</pre>
			<div class="pre-scrollable">sdfdgvgrfthybnujukmjkioi.;open</div>
			
			<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
			
			<samp>This text is meant to be treated as sample output from a computer program.</samp>
			
			
			
			<table class="table table-striped table-bordered table-hover table-condensed">
				<tr class="active">
					<td>#</td>
					<td>First Name</td>
					<td>Last Name</td>
				</tr>
				<tr class="success">
					<td>1</td>
					<td>Mark</td>
					<td>Otto</td>
				</tr>
				<tr class="info">
					<td>2</td>
					<td>Jacob</td>
					<td>Thornton</td>
				</tr>
				<tr class="warning">
					<td>3</td>
					<td>Larry</td>
					<td>the Bird</td>
				</tr>
				<tr class="danger">
					<td>3</td>
					<td class="success">Larry</td>
					<td class="sr-only">the Bird</td>
				</tr>
			</table>
			
			<div class="table-responsive">
				<table class="table">
					<tr>
						<td>1</td>
						<td>Mark</td>
						<td>Otto</td>
					</tr>
					<tr>
						<td>2</td>
						<td>Jacob</td>
						<td>Thornton</td>
					</tr>
				</table>
			</div>
			<div class="danger">the Bird <abbr title="attribute">非table，添加此样式不管用</abbr></div>
			<br>
			
			
		</div>

		<div class="row">
			<div class="col-md-8">
				<h2><kbd>表单</kbd></h2>
				<form>
				<div class="form-group">
					<label>Email:</label>
					<input type="text" class="form-control">
				</div>
				</form>
				
				<form class="form-inline">
				<div class="form-group">
					<label>Email:</label>
					<input type="text" class="form-control" placeholder="Dane Jae">
				</div>
				<button type="submit" class="btn btn-default">submit</button>
				</form>
				<br>
				
				
				<form class="form-inline">
					<div class="form-group">
						<div class="input-group">
						  <div class="input-group-addon">$</div>
						  <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
						  <div class="input-group-addon">.00</div>
						</div>
						<button type="submit" class="btn btn-primary">Transfer cash</button>
					</div>
				</form>
				<br>
				
				
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">Email</label>
						<div class="col-sm-10">
							<input type="email" class="form-control" placeholder="Email">
						</div>
					</div>
				</form>
				
				<div class="checkbox">
				  <label>
					<input type="checkbox" value="">
					Option one is this and that&mdash;be sure to include why it's great
				  </label>
				</div>
				
				<div class="checkbox">
					<label>
						<input type="checkbox" value="" disabled>
						Option one is this and that&mdash;be sure to include why it's great
					</label>
				</div>
				
				<h2><kbd>内联单选或多选</kbd></h2>
				<label class="checkbox-inline">
					<input type="checkbox" value="option1" id="inlineCheckbox1">1
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" value="option2">2
				</label>
				<label class="checkbox-inline">
					<input type="checkbox" value="option3">3
				</label>
				
				
				<label>
					<input type="checkbox" value="option1" aria-label="...">
				</label>
				
				<select class="form-control">
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
				</select>
				
				<form class="form-horizontal">
				  <div class="form-group">
					<label class="col-sm-2 control-label">Email</label>
					<div class="col-sm-10">
					  <p class="form-control-static">email@example.com</p>
					</div>
				  </div>
				</form>
				
				<input class="form-control" type="text" disabled>
				
				<br>
				
				
				<div class="form-group has-success has-feedback">
				  <label class="control-label" for="inputSuccess2">Input with success</label>
				  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
				  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				  <span id="inputSuccess2Status" class="sr-only">(success)</span>
				</div>
				
				<br>
				
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputSuccess2">Input with success</label>
					<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
					<span id="inputSuccess2Status" class="sr-only">(success)</span>
				</div>
				
				
				
				
				<div class="form-group has-success has-feedback">
				  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
				  <div class="input-group">
					<span class="input-group-addon">@</span>
					<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
				  </div>
				  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
				</div>
				
				<div class="form-group has-success has-feedback">
					<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
					<div class="input-group">
						<span class="input-group-addon">@</span>
						<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
					</div>
					<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
				</div>
				
			</div>
			
			</div>
			
			<div class="row">
				<h3>为<code>&lt;a&gt;</code>、<code>&lt;button&gt;</code>或<code>&lt;input&gt;</code>元素添加按钮类(button class)即可使用Bootstrap提供的样式。</h3>
				
				<a class="btn btn-default" href="#" role="button">Link</a>
				<button class="btn btn-default" type="submit">Button</button>
				<input class="btn btn-default" type="button" value="Input"></input>
				
				<br>
				<br>
				<button type="button" class="btn btn-default btn-lg">(默认样式)Default</button>
				<button type="button" class="btn btn-info">(一般信息)Default</button>
				<button type="button" class="btn btn-primary btn-sm">(首选项)Primary</button>
				<button type="button" class="btn btn-success btn-xs">(成功)Success</button>
				<button type="button" class="btn btn-warning">(警告)Default</button>
				<button type="button" class="btn btn-danger">(危险)Default</button>
				<button type="button" class="btn btn-link">(链接)Default</button>
				
				<div class="col-md-4 opacity">
					<button type="button" class="btn btn-block active" disabled="disabled">块级按钮</button>
				</div>
				
			</div>
			
			
			<br>
			<br>
			<br>
			<br>
		<div class="row">
				<div class="col-md-6">
					<img src="images/ba1.jpg" class="img-responsive img-rounded">
				</div>
				<div class="col-md-6">
					<img src="images/23.jpg" class="img-responsive img-circle">
				</div>
				<br>
				<br>
				<div class="col-md-2 thumbnail">
					<img src="images/89.jpg" class="img-responsive">
				</div>
		</div>
		
		<p class="text-muted">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="text-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="text-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="text-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="text-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
		
		<p class="bg-muted">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
		<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
		
		<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		
		<span class="caret"></span>
		
		<div class="row">
			<div class="pull-left">xnnjnjsxjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</div>
			<div class="pull-right">xnnjnjsxjjjjjjjjjjjjjjjjjjjjjjjj</div>
		</div>
		
		<div class="center-block">ososoososoosososoososo</div>
		
		<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
		<h1 class="text-hide">Custom heading</h1>
		
		
		<div class="dropup">
			<span class="caret"></span>
		</div>
		
		
		<div class="btn-group" role="group" aria-label="...">
		  <button type="button" class="btn btn-default">1</button>
		  <button type="button" class="btn btn-default">2</button>

		  <div class="btn-group" role="group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			  Dropdown
			  <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
			  <li><a href="#">Dropdown link</a></li>
			  <li><a href="#">Dropdown link</a></li>
			</ul>
		  </div>
		</div>
		
		
		
		
		</div>
	</div>
</html>	
